<template>
  <div class="home-wrapper">
    <Banner></Banner>
    <house-nav></house-nav>
    <House :houseList="list"></House>
    <!-- <app-box></app-box> -->
    <xf-house :list="topList"></xf-house>
    <!-- <xq-house></xq-house> -->
    <House :houseList="list"></House>
    <News :newsList='newsList' :rNerList="rNerList"></News>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, toRefs, reactive, computed } from "vue";
import Banner from "./components/banner.vue";
import HouseNav from "./components/houseNav.vue";
import House from "@/components/houseList/house.vue";
import AppBox from "./components/appBox.vue";
import XfHouse from "./components/xf-house.vue";
import XqHouse from "./components/xq-house.vue";
import News from "@/components/news/news.vue";
import { useStore, mapMutations, mapGetters } from "vuex";

export default defineComponent({
  components: {
    Banner,
    HouseNav,
    House,
    AppBox,
    XfHouse,
    XqHouse,
    News,
  },
  setup() {
    const data = reactive({
      page: {
        pageSize: 8,
        total: 100,
      },
      form: {
        pageSize: 4,
        page: 1,
        house_title: "",
      },
      list: [],
      newsList: [],
      rNerList: [],
      topList: []
    });
    const store = useStore();
    
    const isLoading = computed(() => store.state.loading.loading);
    const mapMutation = mapMutations("login", ["CHANGE_LOGINTYPE"]);
    const setUserList = mapMutation.CHANGE_LOGINTYPE.bind({ $store: store });
    const format = (arr) => {
       arr.forEach((item) => {
          item.house_banner = item.house_banner && item.house_banner.split(",");
          item.keywords = item.keywords && item.keywords.split(",");
          item.item_pro = item.item_pro && item.item_pro.split(",");
          item.keywords =
            item.keywords && item.keywords.length && item.keywords.slice(0, 2);
        });
        return arr
    }
    onMounted(() => {
      setUserList("login");
      store.dispatch("home/houseList", data.form).then((res) => {
        let arr = res.data;
        data.list = format(arr);
      });
      store.dispatch("home/houseList", {is_top:1}).then((res) => {
        let arr = res.data;
        data.topList = format(arr).slice(0,3);
      });
       store.dispatch("home/newsList", {tag: 2}).then((res) => {
        data.newsList = res.data.slice(0,3);
        data.rNerList = res.data.slice(2,8);
      });
    });
    return {
      ...toRefs(data),
      isLoading,
    };
  },
});
</script>

<style lang="scss">
.home-wrapper {
  background: #f8f8f8;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
</style>



